<template>
  <div class="search-top">
    <van-search
      v-model="value"
      placeholder="搜索门店名丶货号"
      placeholder-class="placeholder-input"
      show-action
      @focus="oninput"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch" class="right-map-link">
        <img src="../assets/img/home/page/地图逛@3x.png" alt />
        <span>地图逛</span>
      </div>
    </van-search>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    oninput() {
      this.$router.push({ name: "searchPage", path: "/searchPage" });
      this.$store.commit("showLoading");
    },
    onSearch() {
      console.log("地图")
      this.$router.push('/map');
    }
  }
};
</script>

<style lang="less" scoped>
.search-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
  padding: 0 19px 0 10px;
  box-sizing: border-box;
  width: 100%;
  height: 35.5px;
  /deep/.van-search {
    height: 100%;
    padding: 0;
  }
}
// 搜索框
.van-search__content--square {
  background-color: #f5f5f5;
  width: 267.5px;
  height: 100%;
  font-size: 12px;
  border-radius: 5px;
  // 输入框
  /deep/ .van-cell {
    padding: 0 !important;
  }

  .van-icon-search:before {
    height: 100%;
  }
  /deep/ .van-field__body {
    height: 100%;
    /deep/ .van-field__control {
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        font-size: 12px;
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        font-size: 12px;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        font-size: 12px;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        font-size: 12px;
      }
    }
  }

  .van-field__control {
    height: 100%;
  }
  // 放大镜图标
  /deep/.van-field__left-icon .van-icon {
    height: 100%;
    padding: 7px 0;
    box-sizing: border-box;
  }
  /deep/.van-icon-search:before {
    height: 100%;
  }
}
// 右边字体
/deep/.van-search__action {
  .right-map-link {
    display: flex;
    align-items: center;
    img {
      height: 18px;
      margin-right: 5px;
    }
    /deep/span {
      font-family: PingFangSC-Semibold, sans-serif;
      font-size: 14px;
      font-weight: 700;
    }
  }
}
</style>